<template>
  <div class="od-content-container">
    <h1>公交车运营分析</h1>
    <p class="flow">累计总客流量<span>{{num}}</span><span>人次</span></p>
    <p class="head"><span>客流量top10排名</span><span>单位：人次</span></p>
    <div class="stop" v-for="(stop, index) in stops" :key="index">
      <span class="name">{{stop.name}}</span>
      <span class="bar-container">
        <span class="bar-color" :style="{width: (stop.num - minNum) / (maxNum - minNum) * barWidth / 2 + barWidth / 2 + 'px'}"></span>
      </span>
      <span class="num">{{stop.num}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "od-bus",

    data: function () {
      return {
        barWidth: 160
      }
    },

    computed: {
      maxNum: function () {
        return this.stops.reduce(function (pre, cur) {
          return pre.num > cur.num ? pre : cur;
        }).num;
      },
      minNum: function () {
        return this.stops.reduce(function (pre, cur) {
          return pre.num < cur.num ? pre : cur;
        }).num;
      }
    },

    props: {
      num: Number,
      stops: Array
    }
  }
</script>

<style scoped lang="scss">
  .od-content-container {
    text-align: left;
    padding-left: 10px;

    h1 {
      margin-top: 30px;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 0;
    }

    .flow {
      font-size: 22px;
      margin-top: 2px;

      span:nth-child(1) {
        font-size: 36px;
        margin-left: 64px;
      }

      span:nth-child(2) {
        font-size: 24px;
      }
    }

    .head {
      font-size: 18px;
      margin-top: 12px;
      position: relative;

      span:nth-child(2) {
        font-size: 16px;
        position: absolute;
        right: 0;
      }
    }

    .stop {
      font-size: 14px;
      margin-top: 9px;

      .name {
        display: inline-block;
        width: 90px;
      }

      .bar-container {
        display: inline-block;
        width: 160px;
        height: 8px;
        margin-left: 10px;

        .bar-color {
          display: inline-block;
          background-color: #7c66ff;
          height: 8px;
        }
      }

      .num {
        margin-left: 15px;
      }
    }
  }
</style>
